<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/plugin/easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/plugin/easyUI/themes/icon.css">
    <script type="text/javascript" src="/static/plugin/easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="/static/plugin/easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/plugin/easyUI/locale/easyui-lang-zh_CN.js"></script>
    <script>
        var roleId = null;
        $(function () {
            $("#role_datagrid").datagrid({
                url:"/role/query.do",
                fit:true,
                fitColumns:true,
                columns:[[
                    {field:"sn",title:"编码",width:100},
                    {field:"name",title:"名称",width:100},
                ]],
                pagination:true,
                singleSelect:true,
                toolbar:"#role_datagrid_tb"
            })
            $("#role-dialog").dialog({
                width:720,
                height:500,
                closed:true,
                onClose:function () {
                    //清空表单数据
                    $("#role-form").form("clear");
                    //给已选择的权限行加载空的数据
                    $("#selectedPermissions").datagrid("loadData",[]);
                    //每次关闭dialog要加载所有权限数据
                    $("#allPermissions").datagrid("load");
                }
            })
            $("#allPermissions").datagrid({
                width:300,
                height:300,
                title:"所有权限",
                url:"/permission/selectAllNames.do",
                singleSelect:true,
                fitColumns:true,
                rownumbers:true,
                columns:[[
                    {field:"name",title:"菜单名称",width:100,align:"center"}
                ]],
                onClickRow:function (index,row) {
                    $("#selectedPermissions").datagrid("appendRow",row);
                    $("#allPermissions").datagrid("deleteRow",index);
                },
                onLoadSuccess:function (data) {
                    $("#selectedPermissions").datagrid("load",{roleId:roleId});
                }
            })

            $("#selectedPermissions").datagrid({
                width:300,
                height:300,
                title:"拥有权限",
                singleSelect:true,
                fitColumns:true,
                rownumbers:true,
                url:"/permission/queryByRoleId.do",
                columns:[[
                    {field:"name",title:"菜单名称",width:100,align:"center"}
                ]],
                onClickRow:function (index,row) {
                    $("#allPermissions").datagrid("appendRow",row);
                    $("#selectedPermissions").datagrid("deleteRow",index);
                },
                onLoadSuccess:function (data) {
                    var rows = data.rows;
                    //获取已有权限id集合
                    var ids = $.map(rows,function (value) {
                        return value,id;
                    })
                    //遍历所有权限数据,取出权限id进行判断
                    var allRows = $("#allPermissions").datagrid("getRows");
                    for(var i = allRows.length - 1;i > 0;i--){
                        //判断当前id是否再ids数组中
                        var index = $.inArray(allRows[i].id,ids);
                        if (index != i) {
                            $("#allPermissions").datagrid("deleteRows",i);
                        }
                    }
                }
            })
        });
        
        function add() {
            $("#role-dialog").dialog("setTitle","角色新增");
            $("#role-dialog").dialog("open");
        }

        function save() {
            $("#role-form").form("submit",{
                url:"/role/saveOrUpdate.do",
                onSubmit:function(param){
                    var rows = $("#selectedPermissions").datagrid("getRows");
                    for(var i=0;i<rows.length;i++){
                        param["permissions["+i+"].id"] = rows[i].id;
                    }
                },
                success:function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        $.messager.alert("温馨提示","保存成功","info",function () {
                            $("#role-dialog").dialog("close");
                            $("#role_datagrid").datagrid("reload");
                        })
                    }else {
                        $.messager.alert("温馨提示","保存失败","error");
                    }
                }
            })
        }

        function edit() {
            var currentRow = $("#role_datagrid").datagrid("getSelected");
            if (!currentRow) {
                $.messager.alert("温馨提示","亲，请选择一条需要操作的数据","info");
                return;
            }
            $("#role-dialog").dialog("setTitle","角色编辑");
            $("#role-dialog").dialog("open");
            /*数据回显*/
            $("#role-form").form("load",currentRow);
        }

        function cancel() {
            $("#role-dialog").dialog("close");
        }

        function reload() {
            $("#role_datagrid").datagrid("reload");
        }
    </script>
</head>
<body>
    <%--角色列表界面--%>
    <table id="role_datagrid"></table>
    <%--角色列表界面顶部的工具栏--%>
    <div id="role_datagrid_tb">
        <a class="easyui-linkbutton" onClick="add()" data-options="iconCls:'icon-add',plain:true">新增</a>
        <a class="easyui-linkbutton" onclick="edit()" data-options="iconCls:'icon-edit',plain:true">编辑</a>
        <a class="easyui-linkbutton" onclick="reload()" data-options="iconCls:'icon-reload',plain:true">刷新</a>
    </div>
    <div id="role-dialog">
        <form id="role-form" method="post">
            <input type="hidden" name="id" id="role_id">
            <div style="margin-bottom: 20px;">
                <div style="float: left">
                    <input id="username_box" class="easyui-textbox" name="sn" style="width: 100%"
                           data-options="label:'编码',labelWidth:60">
                </div>
                <div style="float: right">
                    <input class="easyui-textbox" name="name" style="width: 100%"
                           data-options="label:'名称',labelWidth:60">
                </div>
            </div>
            <div style="margin-bottom: 20px;">
                <div style="float: left">
                    <table id="allPermissions"></table>
                </div>
                <div style="float: left">
                    <table id="selectedPermissions"></table>
                </div>
            </div>
            <br/>
            <a class="easyui-linkbutton" onClick="save()" data-options="iconCls:'icon-save',plain:true">保存</a>
            <a class="easyui-linkbutton" onclick="cancel()" data-options="iconCls:'icon-cancel',plain:true">取消</a>
        </form>
    </div>
</body>
</html>